<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false"
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="bonus_menu">
			<view class="bonus_menu_top">
				<view  @click="screenEvent" class="bonus_menu_lable">
					筛选<uv-icon name="arrow-right"></uv-icon>
				</view>
				<view class="bonus_menu_old">
					[查看10天前记录]
				</view>
			</view>
		</view>
		
		<view class="bonus_page">
			<uni-pagination style="padding: 0 20px;" :total="50" title="标题文字" prev-text="前一页" next-text="后一页" />
		</view>
		<uni-popup ref="popup" type="center">
			<view class="jiaoyi_shaix">
				<view class="jiaoleix">
					<view class="leixin_name">类型</view>
					<view class="leixin_zhonl">
						<view class="quanbu" v-for="(item,index) in type" :key="index" @click="checkEvent(index,item)">
							{{item.name}}
						</view>
					</view>
					
				</view>
				<view class="jiaoleix">
					<view class="leixin_name">币种</view>
					<view class="leixin_zhonl">
						<view class="quanbu" v-for="(item,index) in type" :key="index" @click="changeEvent(index,item)">
							{{item.name}}
						</view>
					</view>
					<button class="exitbtn" @click="close">查询</button>
				</view>
			
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {caplogDetail} from '@/api/user.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "货币明细",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left",
				},
				titleStyle: {
					fontWeight: 700
				},
				type: [{
					name: "全部",
					id: ""
				}, {
					name: "转帐(出)",
					id: "20"
				}, {
					name: "转帐(入)",
					id: "21"
				}, {
					name: "提现",
					id: "30"
				}, {
					name: "充值",
					id: "40"
				}, {
					name: "商城",
					id: "41"
				}, {
					name: "抢购",
					id: "100"
				}, {
					name: "商品上架",
					id: "101"
				}, {
					name: "确认收款",
					id: "103"
				}, {
					name: "打款",
					id: "104"
				}, {
					name: "转换",
					id: "120"
				}, {
					name: "提货",
					id: "131"
				}, {
					name: "分享佣金",
					id: "1"
				}, {
					name: "获得抵价券",
					id: "145"
				}, {
					name: "回收抵价券",
					id: "146"
				}, {
					name: "使用抵价券",
					id: "147"
				}],
				typeindex: 0,
				bizhong: [{
					name: "全部",
					id: "yue"
				}, {
					name: "转帐(出)",
					id: "yue"
				}],
				biindex: 0,
				serch: {
					limit: 2,
					page: 1,
					currency: "yue",
					type: ""
				},
				list: [],
				total: 0
			}
		},
	   onLoad() {
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/index/user' // 替换成上一页的路径
				});
			},
			screenEvent() {
				var t = this.type;
				this.$refs.popup.open(t),
				this.subDataEvent()
			},
			changePopup(t) {},
			checkEvent(t, i) {
				this.typeindex = t,
				this.serch.type = i.id
			},
			changeEvent(t, i) {
				this.biindex = t,
				this.serch.currency = i.id
			},
			goToUrl(t) {
				this.$common.navigateTo(t)
			},
			upPage() {
				this.serch.page > 1 && (this.serch.page = this.serch.page - 1,
				this.subDataEvent())
			},
			nextPage(){
				this.serch.page < this.total && (this.serch.page = this.serch.page + 1,
				this.subDataEvent())
			},
			subDataEvent() {
				caplogDetail(this.serch).then(response=>{
					if(response.code == 1){
						var n = response.data.total;
						this.total = Math.ceil(n / this.serch.limit),
						this.list = response.data.data
					}
					
				});
			},
			
			close(){
				var t = this.type;
				this.$refs.popup.close(t)
				this.subDataEvent()
				
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	    background-color: #fafafa;
	}
	.bonus_menu {
	    position: fixed;
	    top: 44px;
	    width: 100%;
	    height: 36px;
	    line-height: 36px;
	    border-bottom: 1px solid #8a8a8a;
	    background-color: #fff;
	}
	
	.bonus_menu_top{
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	}
	.bonus_menu_lable {
	    padding-left: 10px;
	    display: flex;
	    align-items: center;
	}
	.bonus_menu_old{
	    display: inline-block;
	    margin-right: 10px;
	    font-size: 15px;
	    color: #ef2c2c;
	}
	.bonus_page{
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    height: 40px;
	    line-height: 40px;
	    background-color: #fff;
	    border-top: #919191 1px solid;
	    padding-top: 5px;
	}
	.jiaoyi_shaix {
	    display: flex;
	    flex-direction: column;
	    background-color: #fff;
	    width: 100%;
	    height: 514px;
	    overflow-y: scroll;
	    padding: 10px 0 10px 0;
	}
	.jiaoleix {
	    padding: 10px 10px 5px 20px;
	}
	.leixin_name {
	    padding: 0 0 10px 0;
	    font-size: 18px;
	    font-weight: 700;
	    border-bottom: #ccc solid 1px;
	    margin-bottom: 10px;
	}
	.leixin_zhonl {
	    width: 100%;
	    text-align: center;
	    justify-content: space-between;
	    display: flex;
	    flex-wrap: wrap;
	}
	.quanbu{
	    background-color: #c57f7e;
	    width: 100px;
	    text-align: center;
	    font-size: 15px;
	    font-weight: 700;
	    color: #fff;
	    border-radius: 25px;
	    padding: 5px 25px;
	    margin-right: 15px;
	    margin-bottom: 10px;
	}
	.exitbtn{
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #c57f7e, #ed6266);
	    font-size: 14px;
	    margin: 15px auto;
	    color: #fff;
	    padding: 3px 0;
	}
</style>